<template>
<div>

	<flexbox>
	    <flexbox-item>
	      <template>
	        <yd-search :result="result" fullpage v-model="value2" :item-click="itemClickHandler" :on-submit="submitHandler"></yd-search>
	      </template>
	    </flexbox-item>
	</flexbox>

  	<div>
  		<yd-cell-group>
	        <yd-cell-item @click.native="opt(item)" arrow
	         v-for="item in sellerlist">
	            <img slot="icon" :src="item.headimgurl" >
	            <span slot="left">{{item.nickname}}</span>
	            <span v-if="$route.query.what == '2'" slot="right">审批</span>
	            <span v-if="$route.query.what == '1'" slot="right">解除</span>
	        </yd-cell-item>
	    </yd-cell-group>
  	</div>
</div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'


export default {
	name: 'sellerlist',
	data () {
		return {
			value2: '',
      		result: [],
		}
	},

	computed: {
		...mapGetters([
		    'userdata',
		    'sellerlist',
		]),

		sellernamelist () {
	        var arr = [];
	        
	        for(var i = 0; i < this.sellerlist.length; i++){
	          var tmp = this.sellerlist[i];
	          arr.push(tmp.nickname);
	        }
	        return arr;
	    }
	},

	methods: {
		agree (item) {
			console.log(item.create_by);
			console.log(this.userdata);
			this.$store.dispatch('agreeSeller', {
				'create_by' : item.create_by,
				'state' : '1',
				'callback' : () => {
					this.init();
				}
			});
		},


		unagree (item) {
			console.log(item.create_by);

			this.$store.dispatch('agreeSeller', {
				'create_by' : item.create_by,
				'state' : '0',
				'callback' : () => {
					this.init();
				}
			});

		},


		opt (item) {

			console.log(item);
			//待审批的分销商
			if(this.$route.query.what == '2'){
				this.$dialog.confirm({
                    title: '提示',
                    mes: '是否同意 ' + item.nickname + ' 成为你的下级分销商',
                    opts: [
                        {
                            txt: '取消',
                            color: false,
                            callback: () => {
                            }
                        },
                        {
                            txt: '拒绝',
                            stay: true,
                            //color: '#CCC',
                            callback: () => {
                                this.unagree(item);
                            }
                        },
                        {
                            txt: '通过',
                            color: true,
                            callback: () => {
                                this.agree(item);
                            }
                        }
                    ]
                });
			}else if(this.$route.query.what == '1'){
				this.$dialog.confirm({
                    title: '提示',
                    mes: '是否将 ' + item.nickname + ' 解除分销资格',
                    opts: [
                        {
                            txt: '取消',
                            color: false,
                            callback: () => {
                            }
                        },
                        
                        {
                            txt: '解除',
                            color: true,
                            callback: () => {

                            	console.log('解除')
                                //this.agree(item);
                                this.relieveSeller(item);
                            }
                        }
                    ]
                });
			}

		},


		relieveSeller (item) {

			const para = {
				fun : 'updatefxlevel',
				user_base : item.user_base,
				cb : res => {
					console.log(res);
					this.$dialog.toast({
	                    mes: '解除成功',
	                    timeout: 1500,
	                    icon: 'success',
	                });
					this.init();
				},
				err : res => {
					this.$dialog.toast({
	                    mes: res,
	                    timeout: 1500,
	                    icon: 'error',
	                });
				}
			};

			this.$store.dispatch('update', para);
		},


		init (nickname) {

			var para = {};

			if(nickname != undefined){
				para['nickname'] = nickname;
			}

			//下级分销商
			if(this.$route.query.what == '1')
			{
				para['level_code'] = this.userdata.level;
				this.$store.dispatch('sellerList', para);
			}
			//待审核分销商
			else if(this.$route.query.what == '2')
			{
				this.$store.dispatch('unSellerList', para);
			}

		},

		getResult(val) {
		  if (!val) return [];
		  return this.sellernamelist.
		  filter(value => (new RegExp(val, 'i').test(value)));
		},

		itemClickHandler(item) {
		  console.log('itemClickHandler');
		  this.init(item);
		},
		submitHandler(value) {
		  console.log('submitHandler');
		  this.init(value);
		},

	},

	created () {
		this.init();
	},

	watch: {
      value2(val) {

          this.result = this.getResult(val);
      }
  }


}
</script>

<style scoped>

.more {
	width: 100%;
	height: 50px;
	line-height: 50px;
	float: left;
	text-align: center;
}

</style>
